import React, { Component, useEffect, useState } from 'react'
import { connect } from 'react-redux'
import { Text, View, StyleSheet, Image, SafeAreaView, ScrollView, ImageBackground, Dimensions, TextInput } from 'react-native'
import { pTx } from "../../utils/dimensions"
import httpApi from "../../api"
import { getDateDiff } from "../../utils/formatDate"


const RedPacketInfo = (props) => {
    const params = props.route.params
    const M = params.M?.split(' ')
    const [packetInfo, setPacketInfo] = useState({})
    const [list, setList] = useState([])
    useEffect(() => {
        httpApi.getRedPacketItemList({ id: M[0] }).then(res => {
            if (res.code == 20) {
                setList(res.data.RedPacketItemList)
            }
        })
    }, []);
    useEffect(() => {
        httpApi.getRedPacketInfo({ id: M[0] }).then(res => {
            if (res.code == 20) {
                setPacketInfo(res.data.RedPacket)
            }
        })
    }, []);
    return (
        <SafeAreaView style={styles.page}>
            <ScrollView >
                <ImageBackground source={require('../../assets/image/image1.png')} resizeMode="cover" style={styles.block}>

                </ImageBackground>
                <View style={styles.userInfo}>
                    <View style={styles.user}>
                        <Image style={styles.ProfilePhoto} source={{ uri: httpApi.inline + packetInfo.ProfilePhoto }}></Image>
                        <Text style={styles.NickName} >{packetInfo.NickName}发出的红包</Text>
                    </View>
                    <Text style={styles.term} >恭喜发财，大吉大利</Text>
                    {
                        params.RedPacketIdState ?
                            <>
                                <Text style={styles.amountBox} ><Text style={{ fontSize: pTx(29) }}>$</Text>{M[2] || 0}</Text>
                                <Text style={styles.stylestText} >已存入钱包，可直接转账{'>'}</Text>
                                <View style={styles.reply}>
                                    <View style={styles.replyBlock}>
                                        <Image style={[styles.replyImage]} source={require('../../assets/image/icon32.png')}></Image>
                                        <Text style={styles.stylestText} >回复表情到聊天</Text>
                                    </View>
                                </View>
                            </>
                            : ""
                    }

                </View>
                <View style={styles.redPacketInfoList}>
                    <Text style={styles.redPacketText} >
                        {
                            params.RedPacketIdState ? `1个红包共${packetInfo.Amount || 0}$`
                                :
                                `红包金额${packetInfo.Amount || 0}$，等待对方领取`
                        }
                    </Text>
                    {
                        list.map((item, index) => {
                            return (
                                <View style={styles.cell} key={index} >
                                    <View style={styles.users}>
                                        <Image style={styles.ProfilePhotos} source={{ uri: httpApi.inline + item.ProfilePhoto }}></Image>
                                        <View style={styles.userRight}>
                                            <Text style={styles.NickNames}>{item.NickName}</Text>
                                            <Text style={styles.time} >{getDateDiff(new Date(item.CreatedAt))}</Text>
                                        </View>
                                    </View>
                                    <Text style={styles.amount} >${item.Amount}</Text>
                                </View>
                            )
                        })
                    }

                </View>
            </ScrollView>
        </SafeAreaView>
    )
}

const mapStateToProps = (state) => ({})

const mapDispatchToProps = {}

export default connect(mapStateToProps, mapDispatchToProps)(RedPacketInfo)

const styles = StyleSheet.create({
    page: {
        flex: 1
    },
    block: {
        height: pTx(42),
    },
    userInfo: {
        marginTop: pTx(35),
    },
    user: {
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center"
    },
    term: {
        marginTop: pTx(9),
        textAlign: "center",
        color: "#AFB5BD",
        fontSize: pTx(13),
    },
    ProfilePhoto: {
        width: pTx(21),
        height: pTx(21),
        borderRadius: pTx(4),
    },
    NickName: {
        marginLeft: pTx(8),
        fontSize: pTx(18),
        color: "#0A0C14"
    },
    amountBox: {
        marginTop: pTx(26),
        marginBottom: pTx(13),
        textAlign: "center",
        color: "#CEAC75",
        fontSize: pTx(54),
        fontWeight: '500',
    },
    stylestText: {
        textAlign: "center",
        color: "#CEAC75",
        fontSize: pTx(13),
    },
    reply: {
        marginTop: pTx(33),
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
    },
    replyBlock: {
        paddingHorizontal: pTx(16),
        paddingVertical: pTx(14),
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#EDEDED",
        borderRadius: pTx(6),
    },
    replyImage: {
        marginRight: pTx(10),
        width: pTx(18),
        height: pTx(18),
    },
    redPacketInfoList: {
        paddingHorizontal: pTx(15),
        marginTop: pTx(30),
        // borderTopWidth: pTx(8),
        // borderTopColor: "#EDEDED",
    },
    redPacketText: {
        paddingVertical: pTx(10),
        color: "#AFB5BD",
        fontSize: pTx(12),
        borderBottomColor: "rgba(175,181,189,0.15)",
        borderBottomWidth: 1
    },
    cell: {
        paddingVertical: pTx(15),
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        borderBottomColor: "rgba(175,181,189,0.15)",
        borderBottomWidth: 1
    },
    users: {
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
    },
    userRight: {
        marginLeft: pTx(12),
    },
    ProfilePhotos: {
        width: pTx(45),
        height: pTx(45),
        borderRadius: pTx(4),
    },
    NickNames: {
        color: "#0A0C14",
        fontSize: pTx(15),
    },
    time: {
        marginTop: pTx(3),
        color: "#AFB5BD",
        fontSize: pTx(12),
    },
    amount: {
        color: "#0A0C14",
        fontSize: pTx(15),
    }
})